<template>
  <div class="agvGoodsWrap">
    <div v-show="messageInfo.left" class="messageBox" :style="{left: (messageInfo.left<50?80:messageInfo.left)+'px', top: messageInfo.top+'px'}">
      <span>{{'物料编号：'+ (messageInfo.wmsStockList?.[0].materialCode|| 0)}}</span>
      <span>{{'物料名称：'+ (messageInfo.wmsStockList?.[0].materialName|| '无')}}</span>
      <span>{{'物料重量：'+ (messageInfo.wmsStockList?.[0].quantity|| '')+(messageInfo.wmsStockList?.[0].materialUnit|| '')}}</span>
    </div>
    <div class="leftGoods">
      <div 
        v-for="(item, index) in agvLDatas" 
        :key="index" 
        :class="'goodItem goodItem' + item.goodsStatus" 
        @click="openMessageBox(item)"
      >{{goodText[item.goodsStatus]}}</div>
    </div>
    <div class="rightGoods">
      <div 
        v-for="(item, index) in agvRDatas" 
        :key="index" 
        :class="'goodItemR goodItem' + item.goodsStatus" 
        @click="openMessageBox(item)"
      >{{goodText[item.goodsStatus]}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['agvLDatas', 'agvRDatas'],
  data() {
    return {
      goodText: ['空闲', '占用', '分配', '停用',],
      messageInfo: {
        left: 0,
        top: 0,
      },
      
    }
  },
  methods: {
    openMessageBox(data) { // rowNum  columnNum
      let arr = data.location.split('_')
      console.log(arr)
      let left = arr[2]*46 + 75 + (arr[0] == 'N'? 0: 240)
      let top = (arr[1])* 46 
      if(!this.messageInfo || this.messageInfo.location != data.location) {
        console.log(left, top)
        this.messageInfo = {left, top, ...data} 
      }else {
        this.messageInfo = {
          left: 0,
          top: 0,
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.agvGoodsWrap{
  // position: relative;
  // background: rgba($color: #000000, $alpha: 0.5);
  
  display: flex;
  flex-direction: row;
  .leftGoods{
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 定义12个等宽的列 */
    gap: 6px; /* 为网格项添加间隙 */
    padding-left: 155px;
    padding-top: 55px;
  }
  .rightGoods{
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 定义12个等宽的列 */
    gap: 5px; /* 为网格项添加间隙 */
    padding-left: 11px;
    padding-top: 58px;
  }
  .goodItemR{
    // position: absolute;
    width: 54px;
    height: 54px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    line-height: 54px;
    cursor: pointer;
  }
  .goodItem{
    // position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    line-height: 40px;
    cursor: pointer;
  }
  .goodItem1{ 
    background: linear-gradient( 90deg, #79A2FF 0%, #4C82FF 100%);
    // box-shadow: 0px 0px 10px 0px rgba(213,225,238,0.4);
    color: #fff;
  }
   .goodItem0{ 
    background: #001366;
    box-shadow: 0px 0px 10px 0px rgba(232, 234, 236, 0.4);
    color: #fff;
  }
   .goodItem2{ 
    background: #001366;
    box-shadow: 0px 0px 10px 0px rgba(243, 247, 250, 0.4);
    color: #FA9632;
  }
   .goodItem3{ 
    background: #001366;
    box-shadow: 0px 0px 10px 0px rgba(227, 232, 238, 0.4);
    color: #F53F3F;
  }
  .messageBox{
    width: 280px;
    height: 100px;
    background: rgba(0,19,102,0.9);
    box-shadow: inset 0px 1px 30px 0px #44D7B6;
    border-radius: 16px;
    border: 1px solid #44D7B6;
    position: absolute;
    z-index: 11;
    padding-left: 20px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    transform: translate(-30%, -100%);
    span{
      margin-bottom: 5px;
      color: #fff;
      font-size: 14px;
    }
  }
}
</style>